<template>
  <div class="news-list">
    <my-header myheader="新闻列表"></my-header>
    <ul>
      <li v-for="(itme,index) in NewsList" :key="index" @click="jumto(itme.id)">
        <div class="news-item">
          <img :src="itme.img_url" alt="">
          <div class="content">
            <p class="content-title">
              {{itme.title}}
            </p>
            <p class="content-info">
              <span class="content-time">
                {{itme.add_time | filter}}
              </span>
              <span class="content-click">
                {{itme.click}}
              </span>
              </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import MyHeader from '@/components/myheader'
import {getnewslist} from '@/api/NewsApi'
export default {
  data () {
    return {
      NewsList: []
    }
  },

  components: {
    MyHeader
  },

  computed: {},

  mounted () {
    getnewslist()
      .then(res => {
        // console.log(res)
        if (res.status === 0) {
          this.NewsList = res.message
        }
      })
  },

  methods: {
    jumto (id) {
      // console.log(id)
      this.$router.push({name: 'newsdetail', params: {id: id}})
    }
  }
}

</script>
<style lang='scss' scoped>
  .news-list {
    ul {
      li {
        padding: 5px;
      }
    }
    .news-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 100px;
        height: 50px;
        margin-right: 10px;
        flex: 1;
      }
      .content {
        flex: 2;
        width: 250px;
        .content-title {
          font-size: 14px;
          font-weight: bold;
         }
         .content-info {
            display: flex;
            justify-content: space-between;
            color: #26a2ff;
            font-size: 12px;
         }
        }
      }
    }
</style>
